<template>
  <template v-for="(item, index) in prop.ButtonList" :key="index">
    <span class="TableAction">
      <a-button
        v-if="item.type === 'edit'"
        type="primary"
        @click="handelFunction(item, 'edit')"
      >
        <template #icon>
          <EditOutlined />
        </template>
      </a-button>
      <a-popconfirm
        cancel-text="取消"
        ok-text="删除"
        title="是否删除该用户的权限?"
        @cancel="cancel"
        @confirm="handelFunction(item, 'delete')"
      >
        <a-button v-if="item.type === 'del'" danger>
          <template #icon>
            <DeleteOutlined />
          </template>
        </a-button>
      </a-popconfirm>
      <a-button
        v-if="item.type === 'preview'"
        @click="handelFunction(item, 'preview')"
      >
        <template #icon>
          <EyeOutlined />
        </template>
      </a-button>
      <a-popconfirm
        cancel-text="取消"
        ok-text="置顶"
        title="是否置顶?"
        @cancel="cancel"
        @confirm="handelFunction(item, 'fix')"
      >
        <a-button v-if="item.type === 'fix'">
          <template #icon>
            <PushpinOutlined />
          </template>
        </a-button>
      </a-popconfirm>
    </span>
  </template>
</template>

<script setup>
import {
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
  PushpinOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

const emit = defineEmits(["refresh", "changeStatus"]);
const prop = defineProps({
  ButtonList: {
    type: Array,
    default: [],
  },
  value: {
    type: Object,
    default: {},
  },
  openModel: {
    type: Function,
    default: () => {},
  },
});
// 按钮函数
const handelFunction = async (item, type) => {
  switch (type) {
    case "edit":
      let res = handelPayload(item.key, prop.value);
      prop.openModel("编辑", "edit", prop.value);
      emit("changeStatus", "edit", res);
      break;
    case "delete":
      await deleteFunction(item);
      break;
    default:
      break;
  }
  emit("refresh");
};

// 删除
const deleteFunction = async ({ callback, key }) => {
  let res = await callback(handelPayload(key, prop.value));
  if (!res) return;
  message.success(res.data);
};
// 取消
const cancel = (e) => {
  message.error("Click on No");
};

const handelPayload = (key = [], Obj = {}) => {
  let res = {};
  key.forEach((item) => {
    if (Obj[item]) {
      res[item] = Obj[item];
    }
  });
  return res;
};
</script>

<style lang="scss" scoped>
.TableAction {
  margin-right: 10px;
}
</style>